<template>
    <div class="datasetfile">
         <!-- /按钮 -->
        <div class="btns">
            <el-form size="small" inline style="text-align:center">
                <el-form-item>
                    <el-input></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="loadDatasetFiles">搜索</el-button>
                </el-form-item>
            </el-form> 
            <div style="text-align:right">
                 <el-button icon="el-icon-circle-plus-outline" type="primary" size="small" @click="toAddHandler">新增</el-button>
                <el-button size="small" type="primary" icon="el-icon-upload" @click="toUploadHandler">上传</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table size="small" :data="datasetfiles">
            <el-table-column type="index" :index="1" label="序号"></el-table-column>
            <el-table-column label="数据集Id" prop="datasetId" align="center"></el-table-column>
            <el-table-column label="图片" prop="fileId" align="center" width="100px">
                <template slot-scope="scope">
                    <div style="width:80px;height:80px;border-radius:50%;overflow:hidden">
                        <img style="width:100%" :src='"http://47.106.244.1:8888/group1/"+scope.row.fileId' alt="">
                    </div>
                    
                </template>
            </el-table-column>
            <el-table-column label="图片名称" prop="fileRealName" align="center"></el-table-column>
            <el-table-column label="图片介绍" prop="fileIntroduce" align="center"></el-table-column>
            <el-table-column label="操作" width="200px" align="center">
                <!--定制-插槽-->
               <template slot-scope="scope">
                   <el-button type="primary" icon="el-icon-edit" circle @click="editHandler(scope.row)"></el-button>
                   <el-button type="danger" icon="el-icon-delete" circle @click="deleteHandler(scope.row)"></el-button>
               </template>
            </el-table-column>
        </el-table>
        <!-- 模态框 -->
        <el-dialog title="添加图片" :visible.sync="visible" width="40%">
          <el-form size="small" :model="form" label-width="80px">
              <el-form-item label="图片">
                  <el-upload
                     action="http://47.106.244.1:7788/file/upload"
                     list-type="picture-card"
                     :file-list="fileList"
                     :on-success="uploadSuccessHandler">
                     <i class="el-icon-plus"></i>
                  </el-upload> 
              </el-form-item>
              <el-form-item label="图片标识">
                  <el-input v-model="form.fileRealName"></el-input>
              </el-form-item>
              <el-form-item label="图片介绍">
                  <el-input v-model="form.fileIntroduce"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
           <el-button @click="visible = false" size="small">取 消</el-button>
           <el-button type="primary" size="small" @click="submitHandler">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
import {del, get,post} from '@/utils/request'
export default {
    //数据页面
    data(){
        return{
            //
            datasetId:0,
            //组件模板中需要的数据
            datasetfiles:[],
            fileList:[], //上传过的图片
            visible:false,
            form:{}
        }
    },
    //页面渲染时会调用的函数
    created(){
        //this.$route.query用于获取路由参数，this.$router.push({path,query})
        this.datasetId = this.$route.query.datasetId;
        //通过datasetId查找图片
        this.loadDatasetFiles();
    },
    //所有的方法
    methods:{
        submitHandler(){
            let url = "http://localhost:8888/datasetFile/saveOrUpdate"
            post(url,this.form).then(resp => {
                //关闭模态框
                this.visible = false;
                //提示
                this.$message({type:"success",message:resp.message})
                //重载数据
                this.loadDatasetFiles();
            })
        },
        //上传成功的处理函数
        uploadSuccessHandler(resp){
            if(resp.status == 200){
                let fileId = resp.data.id;
                this.form = {
                    ...this.form,
                    fileId
                }
            }else{
                this.$message({type:"error",message:resp.message})
            }
        },
         //修改事件处理函数
        editHandler(row){
            //跳转到修改页面（新增页面）
            //携带当前行的数据
            this.$router.push({
                path:"/datasetFile/datasetFileCreate",  //跳转的路由（前端）
                query:row  //携带的参数
            })
        },
        //删除事件处理函数
        deleteHandler(row) {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
          let url = "http://localhost:8888/datasetFile/deleteById";
          del(url, { id: row.id }).then((resp) => {
            this.$message({ type: "success", message: resp.message });
            this.loadDatasetFiles(); 
            });
         });
        },
        //去上传
        toUploadHandler(){
            this.form = {datasetId : this.datasetId}
            this.fileList = []; //防止下次上传的时候保留图片信息
            this.visible = true;
        },
        //跳转
        toAddHandler(){
            this.$router.push("/datasetFile/datasetFileCreate")
        },
        loadDatasetFiles(){
            let url ="http://localhost:8888/datasetFile/query"
            get(url,{datasetId:this.datasetId}).then((resp) => {
                this.datasetfiles = resp.data;
            })
        }
    }
}
</script>
<style scoped>

</style>